import { request } from '@/api/request';
import { Checkbox, message } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
import { AddSearchFormProps, AddSearchRef } from './interface';

const AddSearchDriverComp = forwardRef<AddSearchRef, AddSearchFormProps>((props, ref) => {
  const { addRow, delRow, seltedIds } = props;
  const [selectedIds, setSelectedIds] = useState<any>(JSON.parse(seltedIds || ''));
  // const [tableDep, _reFreshTable] = useState<number>();
  const selChange = (e: any, rowData: any) => {
    if (e.target.checked) {
      if (selectedIds.length >= 10) return message.warning('最多选择10条');
      addRow(rowData);
      selectedIds.push(rowData.driverId);
      setSelectedIds([...selectedIds]);
      // _reFreshTable(Math.random());
    } else {
      const delIndex = selectedIds.findIndex((item: any) => item === rowData.driverId);
      selectedIds.splice(delIndex, 1);
      setSelectedIds([...selectedIds]);
      // _reFreshTable(Math.random());
      delRow(rowData);
    }
  };

  const [columns] = useState<YmColumnsType<any>>([
    {
      title: '',
      dataIndex: 'selCol',
      key: 'selCol',
      width: 50,
      render: (text, record) => (
        <span>
          <Checkbox
            checked={record.checked}
            onChange={(e) => {
              if (selectedIds.length < 2 && record.checked) return message.warning('至少选择一个司机');
              record.checked = !record.checked;
              selChange(e, record);
            }}
          ></Checkbox>
        </span>
      ),
    },
    {
      title: '姓名',
      dataIndex: 'driverName',
      ellipsis: true,
      key: 'driverName',
      render: (text, record) => <span>{text || '--'}</span>,
    },
    {
      title: '企业',
      dataIndex: 'belongEntNames',
      key: 'belongEntNames',
      render: (text, record) => <span>{text || '--'}</span>,
    },
    {
      title: '电话',
      dataIndex: 'driverPhone',
      ellipsis: true,
      key: 'driverPhone',
      render: (text, record) => <span>{text || '--'}</span>,
    },
  ]);
  const onSubmit = () => {
    return true;
  };
  const addRowFn = (row: any) => {
    addRow(row);
  };
  const delRowFn = (row: any) => {
    delRow(row);
  };
  useImperativeHandle(ref, () => ({
    addRowFn,
    onSubmit,
    delRowFn,
  }));
  return (
    <div style={{ padding: '16px 16px 0' }}>
      <YmTable
        searchForm={{
          formItems: [
            {
              label: '司机姓名',
              name: 'driverName',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入',
                  autoComplete: 'off',
                },
              },
            },
            {
              label: '司机手机号',
              labelCol: {
                style: { width: '100px' },
              },
              name: 'driverPhone',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入',
                  autoComplete: 'off',
                },
              },
            },
          ],
          span: 8,
        }}
        wrapperStyle={{ padding: 0 }}
        columns={columns}
        request={async ({ page }, form) => {
          // 重置的话，加这个，否则看着清了，实际还会传
          const { data } = await request<{ list: any[]; total: number }>({
            url: '/unicron/ent/safetyIndex/driverList',
            data: {
              ...page,
              ...form,
            },
          });
          data.list.forEach((item: any) => {
            if (selectedIds.includes(item.driverId)) item.checked = true;
          });
          return data;
        }}
        // requestOptions={{
        //   reFreshDep: [tableDep],
        //   defaultPageSize: 10,
        // }}
        rowKey="safetyIndexDriverId"
      />
    </div>
  );
});
export default AddSearchDriverComp;
